<style type="text/css">
   .content{
       position: relative;
   }
.tips{
    display: none;
    position: absolute;
}
    .tips p{
        background-color: #8a957a;
        padding: 15px;
        color: #fff;
        border-radius: 4px;
    }
   .sj{
       width: 0px;
       height: 0px;
       border-bottom: 10px solid #8a957a;
       border-right: 10px solid transparent;
       border-top: 10px solid transparent;
       border-left: 10px solid transparent;
       margin-top: -20px;
       margin-left: 73px;
   }


</style>



<div class="bjui-pageHeader">
<form id="pagerForm" data-toggle="ajaxsearch" action="${request.getContextPath()}/machine1/machine1 " method="post">
        <div class="bjui-searchBar">
            <g:hiddenField name="SYS_QUERY_NAME" value="machine1"/>
            <g:hiddenField name="EXPORT_CONTENT_NAME" value="Excel"/>
            <label>设备名称：</label>
            <g:select  name="RESERVED1" from="${packageID}" data-toggle="selectpicker" data-width="150"
                       data-live-search="true" optionKey="RESERVED1" optionValue="RESERVED1" value="${RESERVED1}"
                       noSelection="['': '--ALL--']"/>
            <label>开始时间<strong><span class="text-danger">*</span></strong>：</label>
            <input type="text" name="startTime" class="form-control"
                   data-toggle="datepicker" data-pattern="yyyy-MM-dd HH:mm:ss"
                   size="18" id="start-date-input" readonly value="${startTime.format('yyyy-MM-dd ')}">&nbsp;
            <label>结束时间<strong><span class="text-danger">*</span></strong>：</label>
            <input type="text" name="endTime" class="form-control"
                   data-toggle="datepicker" data-pattern="yyyy-MM-dd HH:mm:ss"
                   size="18" id="end-date-input" readonly value="${endTime.format('yyyy-MM-dd ')}">&nbsp;
            <button type="submit" class="btn-default" data-icon="search" id="btn">查询</button>&nbsp;
            <button type="button" class="btn-blue"
                    onclick="javascript:bjuiExportExl('#pagerForm', '${request.getContextPath()}/machine1/exportExcel')"
                    data-icon="file-excel-o" title="导出Excel">导出Excel文件</button>&nbsp;
        </div>
    </form>
</div>

<div class="bjui-pageContent">
    <table data-toggle="tablefixed" data-width="100%" data-nowrap="true">
        <thead>
        <tr style="height: 10px;" align="center">
            <h3 class="panel-title" align="center"><i class="fa fa-line-chart fa-fw"></i>
                机台总和效率OEE
            </h3>
        </tr>
        <tr>
            <th width="70" rowspan="2"align="center">每天工作时间（min)</th>
            <th width="50" rowspan="2"align="center">负荷工作时间(min)</th>
            <th width="70" rowspan="2"align="center">时间运作率</th>
            <th width="70" rowspan="2"align="center">性能运转率</th>
            <th width="130" rowspan="2"align="center">良品率</th>
            <th width="70" rowspan="2"align="center">OEE</th>
        </tr>
        </thead>
        <tbody>
        <g:each in="${machine1}" status="i" var="tableInstance" id="a1">
            <tr>
                <td width="100"align="center" >
                    <a onmouseover="overShow()" onmouseout="outHide()" href="${request.getContextPath()}/Machine1/machine?startTime=<%=params.startTime%>
            &endTime=<%=params.endTime%>" data-toggle="navtab" data-id="dialog-normal"
                       data-options="{id:'machine', title:'OEE/MTBF/MTTR'}">
                    ${tableInstance.DAY_WORK_TIME}</a></td>
                <td width="70"align="center">
                    <a onmouseover="overShow()" onmouseout="outHide()" href="${request.getContextPath()}/Machine1/machine?startTime=<%=params.startTime%>
            &endTime=<%=params.endTime%>" data-toggle="navtab" data-id="dialog-normal"
                       data-options="{id:'machine', title:'OEE/MTBF/MTTR'}" >

                    ${tableInstance.LOAD_TIME}</td>
                <td width="70"align="center">
                    <a onmouseover="overShow()" onmouseout="outHide()" href="${request.getContextPath()}/Machine1/machine?startTime=<%=params.startTime%>
            &endTime=<%=params.endTime%>" data-toggle="navtab" data-id="dialog-normal"
                       data-options="{id:'machine', title:'OEE/MTBF/MTTR'}">


                    ${tableInstance.AVAILAB_LITY1}</a></td>
                <td width="70"align="center">
                    <a onmouseover="overShow()" onmouseout="outHide()" href="${request.getContextPath()}/Machine1/machine?startTime=<%=params.startTime%>
            &endTime=<%=params.endTime%>" data-toggle="navtab" data-id="dialog-normal"
                       data-options="{id:'machine', title:'OEE/MTBF/MTTR'}">


                    ${tableInstance.PREFORMANCE1}</a></td>
                <td width="70"align="center">
                    <a onmouseover="overShow()" onmouseout="outHide()" href="${request.getContextPath()}/Machine1/machine?startTime=<%=params.startTime%>
            &endTime=<%=params.endTime%>" data-toggle="navtab" data-id="dialog-normal"
                       data-options="{id:'machine', title:'OEE/MTBF/MTTR'}">


                    ${tableInstance.GOOD_NUMBER1}</a></td>
                <td width="70"align="center">
                    <a  onmouseover="overShow()" onmouseout="outHide()" href="${request.getContextPath()}/Machine1/machine?startTime=<%=params.startTime%>
            &endTime=<%=params.endTime%>" data-toggle="navtab" data-id="dialog-normal"
                       data-options="{id:'machine', title:'OEE/MTBF/MTTR'}">



                    ${tableInstance.OEE1}</a></td>
            </tr>
        </g:each>
        </tbody>
    </table>
</div>


<div class="bjui-pageContent" STYLE="margin-top:100px">
    <g:if test="${machine1.size > 0}">
        <table data-toggle="tablefixed" data-width="100%" data-nowrap="true">
            <thead>
            <tr style="height: 10px;" align="center">
                <h3 class="panel-title" align="center"><i class="fa fa-line-chart fa-fw"></i>
                   机台平均故障间隔时间(MTBF)
                </h3>
            </tr>
            <tr>
                <th width="70" rowspan="2"align="center">运行时间合计（min)</th>
                <th width="50" rowspan="2"align="center">故障频次</th>
                <th width="70" rowspan="2"align="center">MTBF（min)</th>
            </tr>
            </thead>
            <tbody>
            <align="center">
            <g:each in="${machine1}" status="i" var="tableInstance" id="a1">
                 <td align="center">
                     <a onmouseover="overShow()" onmouseout="outHide()" href="${request.getContextPath()}/Machine1/machine?startTime=<%=params.startTime%>
            &endTime=<%=params.endTime%>" data-toggle="navtab" data-id="dialog-normal"
                        data-options="{id:'machine', title:'OEE/MTBF/MTTR'}">


                     ${tableInstance.RUN_TIME}</a></td>
                <td align="center">
                    <a onmouseover="overShow()" onmouseout="outHide()" href="${request.getContextPath()}/Machine1/machine?startTime=<%=params.startTime%>
            &endTime=<%=params.endTime%>" data-toggle="navtab" data-id="dialog-normal"
                       data-options="{id:'machine', title:'OEE/MTBF/MTTR'}">${tableInstance.FREQUENCY}</a></td>
                <td align="center">
                    <a onmouseover="overShow()" onmouseout="outHide()" href="${request.getContextPath()}/Machine1/machine?startTime=<%=params.startTime%>
            &endTime=<%=params.endTime%>" data-toggle="navtab" data-id="dialog-normal"
                       data-options="{id:'machine', title:'OEE/MTBF/MTTR'}">

                    ${tableInstance.MTBF}</a></td>
            </g:each>
            </tr>
            </tbody>
        </table>
    </g:if>
    <g:else>
        <g:render template="../template/emptyPanel"/>
    </g:else>
</div>


<div class="bjui-pageContent" STYLE="margin-top:200px">
    <table data-toggle="tablefixed" data-width="100%" data-nowrap="true">
        <thead>
        <tr style="height: 10px;" align="center">
            <h3 class="panel-title" align="center"><i class="fa fa-line-chart fa-fw"></i>
                机台平均维修时间(MTTR)
            </h3>
             <div class="tips">
                 <div class="sj"></div>
                 <p >此处是超链接哦！</p>
             </div>
         </div>
        </tr>
        <tr>
            <th width="70" rowspan="2"align="center" >故障停机时间合计（min)</th>
            <th width="50" rowspan="2"align="center">故障频次</th>
            <th width="70" rowspan="2"align="center">MTTR (min)</th>
        </tr>
        </thead>
        <tbody>
        <g:each in="${machine1}" status="i" var="tableInstance" id="a1">
            <tr>
                <td width="100"align="center"  > <a  onmouseover="overShow()" onmouseout="outHide()" href="${request.getContextPath()}/Machine1/machine?startTime=<%=params.startTime%>
            &endTime=<%=params.endTime%>" data-toggle="navtab" data-id="dialog-normal"
                                                  data-options="{id:'machine', title:'OEE/MTBF/MTTR'}">${tableInstance.STOP_TIME_MIN1}</a></td>
                <td align="center">
                    <a  onmouseover="overShow()" onmouseout="outHide()" href="${request.getContextPath()}/Machine1/machine?startTime=<%=params.startTime%>
            &endTime=<%=params.endTime%>" data-toggle="navtab" data-id="dialog-normal"
            data-options="{id:'machine', title:'OEE/MTBF/MTTR'}">${tableInstance.FREQUENCY}</a></td>
                <div class="content">
                 <td width="70"align="center" class="qqq">
                        <a  onmouseover="overShow()" onmouseout="outHide()" href="${request.getContextPath()}/Machine1/machine?startTime=<%=params.startTime%>
            &endTime=<%=params.endTime%>" data-toggle="navtab" data-id="dialog-normal"
                           data-options="{id:'machine', title:'OEE/MTBF/MTTR'}">
                            ${tableInstance.MTTR}</a></td>
                    <div class="tips">
                        <div class="sj"></div>
                        <p >此处是超链接哦！</p>
                    </div>
                </div>
            </tr>
        </g:each>
        </tbody>
    </table>
</div>
<div id="showDiv" style="color:red;position:absolute;display:none;border:5px solid silver;background:silver;"></div>
<script >
    /*$(document).ready(function(){
        $('.content a').on('mouseover',function(){
            $(".tips").show();
        });
        $('.content a').on('mouseout',function(){
            $(".tips").hide();
        });
    });*/

    function overShow() {
        var showDiv = document.getElementById('showDiv');
        $(showDiv).css("left", event.clientX-200);
        $(showDiv).css("top", event.clientY-50);
        showDiv.style.display = 'block';
        showDiv.innerHTML = '此处为超链接！';
    }

    function outHide() {
        var showDiv = document.getElementById('showDiv');
        showDiv.style.display = 'none';
        showDiv.innerHTML = '';
    }



</script>
